<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dept">
      <el-form :inline="true" :model="dataForm">
        <el-form-item v-if='showSelect'>
          <el-select v-model="dataForm.merchantId" placeholder="请选择商家名称">
            <el-option
              v-for="item in merchantNameOption"
              :key="item.merchantId"
              :label="item.merchantName"
              :value="item.merchantId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            :picker-options="pickerOptions"
            v-model="value1"
            type="daterange"
            :clearable="false"
            range-separator="至"
            :maxDate="today"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="queryData()">{{ $t("query") }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('merchant:flow:foodCollectExport')" type="primary" @click="exportHandle()">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="tj">
        <div class="item">
          <p>总订单数</p>
          <p>{{ (info && info.orderCountTotal) || 0 }}</p>
        </div>
        <div class="item">
          <p>总订单金额(元)</p>
          <p>￥{{ (info && info.orderMoneyTotal) || 0 }}</p>
        </div>
        <div class="item">
          <p>总退款数</p>
          <p>{{ (info && info.quitCountTotal) || 0 }}</p>
        </div>
        <div class="item">
          <p>总退款金额(元)</p>
          <p>￥{{ (info && info.quitMoneyTotal) || 0 }}</p>
        </div>
        <div class="item">
          <p>总手续费(元)</p>
          <p>￥{{ (info && info.chargeMoneyTotal) || 0 }}</p>
        </div>
        <div class="item">
          <p>实际金额(元)</p>
          <p>{{ (info && info.submitMoneyTotal) || 0 }}</p>
        </div>
        <div class="item">
          <p>提现金额(元)</p>
          <p>{{ (info && info.cashOutTotal) || 0 }}</p>
        </div>
      </div>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="createDate"
          label="日期"
          sortable="custom"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="merchantName"
          label="商户名称"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderCount"
          label="订单数"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderMoney"
          label="订单金额"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="quitCount"
          label="退款数"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="quitMoney"
          label="退款金额"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="chargeMoney"
          label="手续费"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cancelCount"
          label="作废"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="refundCount"
          label="退打"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column prop="submitMoney" align="center" label="上交额">
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/order/merchant/flow/record/foodCollectPage",
        getDataListIsPage: true,
        createdIsNeed: false,
        exportURL: "/order/merchant/flow/record/foodCollectExport",
      },
      value1: [],
      info: {},
      merchantNameOption: [],
      dataForm: {
        startDate: "",
        endDate: "",
        source: 2,
        merchantId:localStorage.getItem('MerchantId'),
      },
      showSelect:false,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate && maxDate.getTime() > new Date().getTime()) {
            this.choiceDate = "";
          }
        },
        disabledDate: (time) => {
          console.log(time)
          const today = new Date();
          const one = 90 * 24 * 3600 * 1000; // 30天
          today.setHours(0, 0, 0, 0);
          const maxTime =
            today.getTime() > this.choiceDate + one
              ? this.choiceDate + one
              : today.getTime();
          if (this.choiceDate) {
            const minTime = this.choiceDate - one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
          return time.getTime() > maxTime;
        },
      },
    };
  },
  watch: {
    value1(newval, oldval) {
      if (newval != oldval && newval) {
        this.dataForm.startDate = newval[0];
        this.dataForm.endDate = newval[1];
      } else {
        this.dataForm.startDate = "";
        this.dataForm.endDate = "";
        this.choiceDate = "";
      }
    },
  },
  components: {},
  created() {
    this.dataForm.startDate = new Date().Format("yyyy-MM-dd");
    this.today = this.dataForm.startDate;
    this.dataForm.endDate = this.dataForm.startDate;
    this.value1 = [this.dataForm.startDate, this.dataForm.endDate];
    if (this.$store.state.user.typelist.indexOf("3")>-1) {
      this.getmerchantNameOption();
      this.showSelect=true;
    } else {
      this.getDataList();
      this.getInfo();
    }
  },
  methods: {
    getmerchantNameOption() {
      this.$http
        .post("/order/merchant/wallet/info/getMerchantInfoList2", {
          merchantTypeList:[4],
        })
        .then(({ data: res }) => {
          if (res.msg == "success") {
            this.merchantNameOption = res.data;
            this.dataForm.merchantId = res.data[0].merchantId;
            this.getDataList();
            this.getInfo();
          }
        });
    },
    //查询
    queryData() {
      console.log(this.dataForm);
      if (!this.dataForm.startDate || !this.dataForm.endDate) {
        return this.$message.error("日期区间必选");
      }
      this.getDataList();
      this.getInfo();
    },
    getInfo() {
      this.$http
        .get(`/order/merchant/flow/record/foodCollectTotal`, {
          params: {
            source: 2,
            merchantId: this.dataForm.merchantId,
            startDate: this.dataForm.startDate,
            endDate: this.dataForm.endDate,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.info = res.data.data;
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.tj {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 10px solid #eee;
  width: 108%;
  margin-left: -4%;

  .item {
    p {
      color: #666;
      margin: 0;

      &:last-child {
        font-weight: bold;
        font-size: 20px;
        margin-top: 12px;
        color: #333;
      }
    }
  }
}
</style>
